<template>
  <div class="warp_auto">
    <el-form ref="form" :model="form" class="warp_top">
      <div class="jiansuo-box">
        <span class="label">统计方式：</span>
        <el-select v-model="form.region" @change="selectChanged" class="input">
          <el-option v-for="item in options" :key="item.id" :value="item.label"></el-option>
        </el-select>
      </div>

      <div class="jiansuo-box" v-if='this.val==="按天"'>
        <span class="label">日期：</span>
        <el-date-picker
          class="input"
          v-model="form.startTime"
          type="date"
          :editable="false"
          prefix-icon="el-icon-caret-bottom"
          value-format="yyyy-MM-dd"
          :clearable='false'>
        </el-date-picker>
        <span class="line">--</span>
        <el-date-picker
          class="input"
          v-model="form.endTime"
          type="date"
          :editable="false"
          prefix-icon="el-icon-caret-bottom"
          value-format="yyyy-MM-dd"
          :clearable='false'>
        </el-date-picker>
      </div>

      <div class="jiansuo-box" v-else-if='this.val==="按月"'>
        <span class="label">年份：</span>
        <el-date-picker
          class="input"
          v-model="form.value3"
          type="year" placeholder="选择年"
          value-format="yyyy">
        </el-date-picker>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="onSubmit" class="btn">检索</el-button>
    </el-form>

    <el-card style="margin-bottom: 20px">
      <qc-charts v-bind="chartData"></qc-charts>
    </el-card>

    <el-card shadow="never">
      <el-popover
        placement="top-start"
        width="60"
        trigger="hover"
        content="导出到Excel表"
        style="float: right"
      >
        <el-button type="primary" style="margin-bottom:10px;" @click="Excel" slot="reference">导出
          <i class="el-icon-question"></i>
        </el-button>
      </el-popover>
      <el-table :data="dataarr" stripe :header-cell-style="{background:'#d2e0f9',color:'#606266'}">
        <el-table-column label="日期">
          <template slot-scope="scope">
            <span>{{ scope.row.dataTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用抗菌药物前病原学检验标本送检病例数">
          <template slot-scope="scope">
            <span>{{ scope.row.molecule }}</span>
          </template>
        </el-table-column>
        <el-table-column label="同期使用抗菌药物治疗病例总数">
          <template slot-scope="scope">
            <span>{{ scope.row.denominator }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ICU抗菌药物治疗前病原学送检率(%)">
          <template slot-scope="scope">
            <span>{{ scope.row.ratio }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
import {getBacillosisBrokenList, getBacillosisList} from '@/api/table'
import componentDialog from "@/components/mask/churuke.vue";
import QcCharts from "@/views/Qualitycontrol/qcCharts";
import {getTenantId} from "@/utils/auth";

export default {
  components: {
    QcCharts,
    componentDialog,
  },
  data() {
    return {
      value: "",
      val: "按天",
      arr: [],
      dataarr: [],
      form: {
        region: "按天",
        value3: "",
        startTime: "",
        endTime: "",
      },
      options: [
        {
          id: "0",
          value: "0",
          label: "按天",
        },
        {
          id: "1",
          value: "1",
          label: "按月",
        }
      ],
      chartData: {
        title: '',
        xData: [],
        yData: []
      }
    };
  },
  created() {
    this.getCurrentMonthFirst();
    this.getCurrentMonthLast();
    this.getCurrentYear();
    //进入页面需要传默认参数
    this.onSubmit();
  },
  methods: {
    getCurrentMonthFirst() {
      var date = new Date()
      date.setDate(1)
      var month = parseInt(date.getMonth() + 1)
      var day = date.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      this.form.startTime = date.getFullYear() + '-' + month + '-' + day
    },
    getCurrentMonthLast() {
      var date = new Date()
      var month = parseInt(date.getMonth() + 1)
      var day = date.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      this.form.endTime = date.getFullYear() + '-' + month + '-' + day
    },
    getCurrentYear() {
      var date = new Date();
      this.form.value3 = date.getFullYear() + "";
    },
    //导出
    Excel() {
      axios({
        url: "/api/qualityControl/downloadBacillosisTotal", //打包
        method: "post",
        responseType: "blob",  //也可以使用blob
        headers:{
          'tenantId' : getTenantId()
        },
        data: {
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3
        }
      })
        .then((res) => {
          console.log(res);
          if (res) {
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            }); // res就是接口返回的文件流了
            let objectUrl = URL.createObjectURL(blob);
            const elink = document.createElement("a");
            elink.download = "送检率统计信息.xls"; //下载文件名称,
            elink.style.display = "none";
            elink.href = objectUrl;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //搜索
    onSubmit() {
      getBacillosisBrokenList({
        type: this.form.region,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        year: this.form.value3
      }).then((res) => {
        if (res.code == 200) {
          this.chartData.title = 'ICU抗菌药物治疗前病原学送检率(%)';
          this.chartData.xData = res.data.datetimeList;
          this.chartData.yData = res.data.fourAndEightRateNumList;
        }
      });
      getBacillosisList({
        type: this.form.region,
        patientId: this.patientId,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        year: this.form.value3
      }).then((res) => {
        this.dataarr = res.data;
      })

    },
    selectChanged(value) {
      this.val = value;
    }
  }
}
</script>


